<template>
  <div>
    <h3>App组件</h3>
    <!-- 获取input中的值 -->
    App组件:<input v-model="msg" ref="inpEle" />
    <button @click="logRef">点击打印msg</button>
    <p><button @click="changeSon">点击累加子组件数据</button></p>
    <Show ref="son"/>
  </div>
</template>

<script>
import Show from '@/components/Show'
export default {
  name:"App",
  data(){
    return{
      msg:""
    }
  },
  components:{
    Show
  },
  methods:{
    //方式一：数据双向绑定
    logMsg(){
      console.log(this.msg);
    },
    //方式二：使用ref
    logRef(){
      console.log(this.$refs.inpEle.value)
    },
    /*
      当ref设置在子组件上时，$refs 获取的是子组件的实例对象。父组件可以访问并操作子组件的属性和方法
    */
    changeSon(){
      this.$refs.son.count++
    }
  }
}

</script>

